<template>
	<sw-form-frame v-model="visible" :title="dialogTitle" :width="dialogWidth" :type="formType" not-padding>
		<el-tabs v-model="activeName" class="resource_lib_side" tab-position="left" v-if="!addOrEdit">
			<el-tab-pane label="库基本信息" name="baseInfo"></el-tab-pane>
			<el-tab-pane label="库成员" name="member"></el-tab-pane>
			<el-tab-pane label="资源情况" name="analysis"></el-tab-pane>
		</el-tabs>
		<component :is="activeName" :library-id="dataId" :disabled="disabled" v-if="visible"></component>
	</sw-form-frame>
</template>

<script>
import member from './member/index';
import analysis from './analysis/index';
import baseInfo from './baseinfo/index';
export default {
	components: { baseInfo, member, analysis },
	props: {
		dataId: { type: String, default: '' },
		libName: { type: String, default: '' },
		value: { type: Boolean, default: false },
		disabled: { type: Boolean, default: false }
	},
	data() {
		return {
			formName: '资源库',
			visible: this.value,
			activeName: 'baseInfo'
		};
	},
	computed: {
		addOrEdit() {
			return !this.dataId;
		},
		formType() {
			return this.addOrEdit ? 'add' : 'edit';
		},
		dialogTitle() {
			if (!!this.disabled) {
				return `${this.formName}【${this.libName}】详情`;
			} else if (!this.addOrEdit) {
				return `${this.formName} - ${this.libName}`;
			} else {
				return `${this.formName}`;
			}
		},
		dialogWidth() {
			return this.addOrEdit ? '800' : '920';
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) {
				this.activeName = 'baseInfo';
			}
		}
	},
	methods: {
		/* //资源库操作
		async handleOperateForm(type, data) {
			if (type === 'close') {
				this.visible = false;
			} else if (type === 'submit') {
				this.btnLoading = true;
				this.formData = { ...data };
				await this.submitFormRequest();
				this.btnLoading = false;
			}
		} */
	}
};
</script>

<style lang="scss" scoped>
.resource_lib_side::v-deep {
	width: 120px;
	height: calc(70vh - 55px);
	flex-shrink: 0;

	.el-tabs__header.is-left {
		width: calc(100% - 1px);
		margin-right: 0;
	}

	.el-tabs__nav-wrap::after {
		background-color: #ebeef5;
	}
}
</style>
